<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>v-if</title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
	<div id="app">
		<div v-if="show === 'a'">
			this is a
		</div>
		<div v-else-if="show === 'b'">
			this is c
		</div>
		<div v-else>
			not a or b
		</div>

		<!-- v-show: 元素已经被渲染，只是被隐藏了 -->
		<!-- <div v-show="show">
			{{message}}
		</div> -->
	</div>
	<script>
		var vue = new Vue({
			el: "#app",
			data: {
				message: "Hello Vue",
				show: "a"
			}
		})
	</script>
</body>
</html>